import { lazy, Suspense, useEffect } from 'react'
import { BrowserRouter, Navigate, useRoutes, useNavigate, NavigateFunction, useLocation, Location, Link } from 'react-router-dom'
import Loading from '@/component/loading/loading'
// import Login from '@/pages/login/loginPane'
const Login = lazy(() => import('../pages/login/loginPane'))
const Index = lazy(() => import('../pages/index/index'))
const User = lazy(() => import('../pages/user/user'))
const Blog = lazy(() => import('../pages/blog/blog'))
// const Write = lazy(() => import('../pages/write/write'))
const Chart = lazy(() => import('../pages/blog/chart/chart'))
const Message = lazy(() => import('../pages/message/message'))
const Video = lazy(() => import('../pages/video/video'))
const Nav = lazy(() => import('../pages/nav/nav'))
const AddVideo = lazy(() => import('../pages/video/addVideo/addVideo'))
const Pdf = lazy(() => import('../pages/pdf/pdf'))
const WriteChart = lazy(() => import('../pages/blog/writeChart/writeChart'))
const WriteQK = lazy(() => import('../pages/writeQK/Writeqk'))
const Picture = lazy(() => import('../pages/picture/picture'))
const Links = lazy(() => import('../pages/links/links'))
const routerConfig = [
  {
    path: '/login',
    element: <Login></Login>
  },
  {
    path: '/index',
    element: <Index></Index>,
    children: [
      {
        path: '/index/user',
        element: <User></User>
      },
      {
        path: '/index/blog',
        element: <Blog></Blog>
      },
      // {
      //   path: '/index/write',
      //   element: <Write></Write>
      // },
      {
        path: '/index/blogChart',
        element: <Chart></Chart>
      },
      {
        path: '/index/message',
        element: <Message></Message>
      },
      {
        path: '/index/video',
        element: <Video></Video>
      },
      {
        path: '/index/videoAdd',
        element: <AddVideo></AddVideo>
      },
      {
        path: '/index/nav',
        element: <Nav></Nav>
      },
      {
        path: '/index/pdf',
        element: <Pdf></Pdf>
      },
      {
        path: '/index/writeChart',
        element: <WriteChart />
      },
      {
        path: '/index/writeQK',
        element: <WriteQK />
      },
      {
        path: '/index/blogManage',
        element: <WriteQK />
      },
      {
        path: '/index/picture',
        element: <Picture></Picture>
      },
      {
        path: '/index/links',
        element: <Links></Links>
      }
    ]
  },
  {
    path: '*',
    element: <Navigate to="/login"></Navigate>
  }
]
const loadRouter = (navgate: NavigateFunction, location: Location) => {
  localStorage.getItem('LoginToken') && location.pathname === '/login' && navgate('/index/user')
}
const cantRouter = (navgate: NavigateFunction) => {
  !localStorage.getItem('LoginToken') && navgate('/login')
}
const Routers = () => useRoutes(routerConfig)

const ProtectRouter = () => {
  const navgate = useNavigate()
  const location = useLocation()
  useEffect(() => {
    loadRouter(navgate, location)
  }, [])
  useEffect(() => {
    cantRouter(navgate)
  }, [location.pathname])
  return <Routers></Routers>
}

const Router = () => {
  return (
    <BrowserRouter>
      <Suspense fallback={<Loading></Loading>}>
        <ProtectRouter></ProtectRouter>
      </Suspense>
    </BrowserRouter>
  )
}

export default Router
